<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: hidden;		
		}
	</style>
	
	</head>
	<body>
		<div id="mycanvas_container"></div>
	</body>
    <script type="module">	
        import {jmGraph} from "../../index.js";
        import {jmPath} from "../../src/core/jmPath.js";
    /**
     * 测试
     */

    class jmTest extends jmPath {
        constructor(params) {
            if(!params) params = {};
            super(params);
            this.center = params.center || {x:0, y:0};
            this.radius = params.radius || 0;
        }   

        //定义属性 
        /**
         * 中心点
         * point格式：{x:0,y:0,m:true}
         * @property center
         * @type {point}
         */
        get center() {
            return this.property('center');
        }
        set center(v) {
            return this.property('center', v);
        }
        /**
        * 中心点
        * point格式：{x:0,y:0,m:true}
        * @property center
        * @type {point}
        */
        get radius() {
            return this.property('radius');
        }
        set radius(v) {
            return this.property('radius', v);
        }

        /**
        * 初始化图形点
        * 控件都是由点形成
        * 
        * @method initPoint
        * @private
        * @for jmArc
        */
        initPoints() {
            //可以获取当前控件的左上坐标，可以用来画相对位置
            var location = this.getLocation();//获取位置参数
            
            var cx = location.center.x ;
            var cy = location.center.y ;
        
            this.points = [];

            //简单的画一个X

            //根据半径计算x,y偏移量
            //由于是圆，偏移量相同
            var offw = Math.sqrt(location.radius * location.radius / 2);
            //左上角到右下角对角线
            this.points.push({x:cx - offw, y:cy-offw}, {x:cx + offw, y:cy+offw});

            //左下角到右上角对角线
            //画完上面的线后，需要重新移到这条线的起点，指定m:true即可
            this.points.push({x:cx - offw, y:cy+offw, m:true}, {x:cx + offw, y:cy-offw});

            return this.points;
        }
    } 


    var container = document.getElementById('mycanvas_container');

    var g = jmGraph.create(container, {
        width: 800,
        height: 600,
        mode: '2d',
        style: {
            fill: '#000'
        }
    });
    
    init(g);
        
    function init(g){
        
        var style = {
            stroke: '#23f24e',
            lineWidth: 5,
            shadow: '0,0,20,#fff'
        };
        
        //style.opacity = 0.2;		

        //创建一个自定义的控件
        var t = g.createShape(jmTest, {
            style: style,
            center: {x:100,y:100},
            radius: 20,
        });
        
        g.children.add(t);            
        t.canMove(true);

        function update() {
            if(g.needUpdate) g.redraw();
            requestAnimationFrame(update);
        }

        update();
    }
	</script>
</html>